$(function() {
	//顶部栏移动效果
	var currNavigationBarIndex = 0;
	$(".Div_NavigationBar").on("mouseover", "li", function() {
		var newList = $(this).offset().left;
		var oldList = $(".NavigationBar_broder").offset().left;

		var liWidth = $(".Div_NavigationBar li:eq(0)").width();

		// $(this).css("background", "rgba(0,0,0,0.5)");
		currNavigationBarIndex = $(this).index();
		//创建动画
		const {
			keyframes,
			easing,
			tween,
			styler
		} = popmotion;
		const ballStyler = styler(document.querySelector(".NavigationBar_broder"));
		keyframes({
			duration: Math.abs(newList - oldList) * 2,
			easings: easing.linear,
			values: [{
					marginLeft: oldList,
					width: $(".NavigationBar_broder").width()
				},
				{
					marginLeft: ((newList - oldList) / 4 * 1 + oldList),
					width: liWidth / 10 * 7
				},
				{
					marginLeft: ((newList - oldList) / 4 * 2 + oldList),
					width: liWidth / 10 * 6
				},
				{
					marginLeft: ((newList - oldList) / 4 * 3 + oldList),
					width: liWidth / 10 * 5
				},
				{
					marginLeft: newList,
					width: liWidth
				}
			]
		}).start(ballStyler.set);
	})
	//调整位置
	$(window).resize(function() {
		HideNavigationBarBox();
		$(".NavigationBar_broder").css("marginLeft", $(".Div_NavigationBar li").eq(currNavigationBarIndex).offset().left);
	})
	$(".NavigationBar_broder").css("marginLeft", $(".Div_NavigationBar li").eq(currNavigationBarIndex).offset().left);


	//侧边栏详情下拉框
	$(".Div_NavigationBarBox_menu>ul>li").click(function() {
		//关闭其他
		$(".Div_NavigationBarBox_menu>ul>li").css("height", 25);
		$(this).css("height", 25 + 36 * $(this).children("ul").children("li").length);
	})
	// .mouseout(function() {
	// 	$(this).css("height", 25);
	// })

	//侧边栏出现
	$(".Div_NavigationBarBox").click(function() {
		$(".Div_NavigationBarBox_menu").css("display", "block")
		setTimeout(function() {
			$(".Div_NavigationBarBox_menu").css("opacity", "1");
			$(".Div_NavigationBarBox_menu ul").css("marginRight", "0px");
		}, 100);
	})

	//取消冒泡
	$(".Div_NavigationBarBox_menu ul").click(function() {
		return false;
	})
	
	//点击隐藏
	$("li[id^=Src_]").click(function(){
		HideNavigationBarBox();
	})
	
	//侧边栏隐藏
	$(".Div_NavigationBarBox_menu").click(function() {
		HideNavigationBarBox();
	})
	$(window).resize(function() {
		HideNavigationBarBox();
		if ($(window).width() > 685) {
			$(".Div_NavigationBarBox_menu").css("display", "none");
		}
	})

	function HideNavigationBarBox() {

		$(".Div_NavigationBarBox_menu ul").css("marginRight", "-180px");
		$(".Div_NavigationBarBox_menu").css("opacity", "0");
		setTimeout(function() {
			$(".Div_NavigationBarBox_menu").css("display", "none");
		}, 1000);
	}
})
